<template>
	<view class="order-orderConfirm">
		<view class="top">
			<view class="head u-font-34 u-font-bold">
				<u-image width="52rpx" height="52rpx" src="@/static/images/check.png"></u-image>
				<text class="u-m-l-16">订单提交成功</text>
			</view>
			<view class="u-font-26">
				请尽快去门店取药
			</view>
			<view class="u-font-26 u-p-b-32 u-m-t-8">
				门店地址：
				<text class="u-font-bold">上海市龙华东路385号8楼</text>
			</view>
		</view>
		<view class="bottom">
			<view class="item">
				<text class="u-tips-color u-m-r-32">订单编号</text>
				<text class="u-main-color">{{options.orderSn}}</text>
			</view>
			<view class="item">
				<text class="u-tips-color u-m-r-32">支付方式</text>
				<text class="u-main-color">到店付款</text>
			</view>
			<view class="item">
				<text class="u-tips-color u-m-r-32">支付金额</text>
				<text class="u-type-error u-font-bold">￥{{options.orderAmount}}</text>
			</view>
			<view class="footer">
				<view class="btn btn-left" @click="$u.route(`/pages/order/orderDetail?orderId=${options.orderId}`)">
					查看订单
				</view>
				<view class="btn btn-right" @click="$u.route('/pages/index/home')">
					继续买药
				</view>
			</view>
		</view>
		<u-popup :negative-top="300" v-model="show" mode="center" :border-radius="16" width="640" height="484" :mask-close-able="false">
			<view class="show-content">
				<view class="header">温馨提示</view>
				<view class="info">
					您本次购买的商品里包含处方药，依据国家规定，请尽快上传处方，如您处方不在身边，可使用国药健康直通车问诊平台申请处方。处方开方时间预计
					<text class="u-type-error">20</text>
				分钟左右，为了不影响您的用药，请尽快完成开方，如已有处方请忽略。
				</view>
				<view class="show-content-footer">
					<view class="show-content-btn show-content-btn-left" @click="show=false">
						已有处方
					</view>
					<view class="show-content-btn show-content-btn-right">
						上传/申请处方
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				options:{},
				show:true
			}
		},
		onLoad(options) {
			this.options=options
		}
	}
</script>

<style lang="scss" scoped>
	.order-orderConfirm{
		height: 412rpx;
		background: linear-gradient(to bottom,$u-type-primary, rgba(56,151,255,0.00));
		padding: 24rpx;
		.top,.bottom{
			margin-top: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.top{
			text-align: center;
			color: $u-type-primary;
			.head{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 40rpx 0;
			}
		}
		.bottom{
			line-height: 36rpx;
			padding: 32rpx 24rpx;
			.item{
				padding-bottom: 32rpx;
			}
			.footer{
				display: flex;
				align-items: center;
				justify-content: center;
				.btn{
					display: flex;
					justify-content: center;
					align-items: center;
					height: 76rpx;
					width: 184rpx;
					border-radius: 76rpx;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
				.btn-left{
					border: 1rpx solid $u-type-primary;
					color: $u-type-primary;
				}
				.btn-right{
					border: 1rpx solid $u-type-error;
					background-color: $u-type-error;
					color: #fff;
					margin-left: 24rpx;
				}
			}
		}
		.show-content{
			padding: 0 48rpx;
			.header{
				line-height: 112rpx;
				text-align: center;
				font-size: 32rpx;
				color: $u-main-color;
				font-weight: bold;
			}
			.info{
				color: $u-main-color;
				font-size: 24rpx;
				line-height: 40rpx;
				text-indent:48rpx;
			}
			.show-content-footer{
				margin: 48rpx 0;
				display: flex;
				justify-content: space-between;
				.show-content-btn{
					height: 76rpx;
					width: 250rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 76rpx;
					font-size: 26rpx;
				}
				.show-content-btn-left{
					border: 1rpx solid $u-type-primary;
					color: $u-type-primary;
				}
				.show-content-btn-right{
					background-color:$u-type-primary;
					color: #fff;
				}
			}
		}
	}
</style>
